@extends('admin.layouts.index')

@section('content')

@if (count($errors) > 0)
    <div class="mws-form-message error">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
    <div class="crumb_warp">
        <!--<i class="fa fa-bell"></i> 欢迎使用登陆网站后台，建站的首选工具。-->
        <i class="fa fa-home"></i> <a href="#">首页</a> &raquo; <a href="#">商品管理</a> &raquo; 添加商品
    </div>
    <!--面包屑导航 结束-->

    <!--结果集标题与导航组件 开始-->
    <div class="result_wrap">
        <div class="result_title">
            <h3>快捷操作</h3>
        </div>
        <div class="result_content">
            <div class="short_wrap">
                <a href="#"><i class="fa fa-plus"></i>新增文章</a>
                <a href="#"><i class="fa fa-recycle"></i>批量删除</a>
                <a href="#"><i class="fa fa-refresh"></i>更新排序</a>
            </div>
        </div>
    </div>
    <!--结果集标题与导航组件 结束-->
    
    <div class="result_wrap">
        <form action="{{url('admin\advert')}}" method="post" id="art_form">
            <table class="add_tab">
                <tbody>
                {{csrf_field()}}
                    <tr>
                        <th><i class="require">*</i>网站名：</th>
                        <td>
                            <input type="text" class="lg" name="aname">
                            <p>标题可以写30个字</p>
                        </td>
                    </tr>
                    <tr>
                        <th><i class="require">*</i>网址：</th>
                        <td>
                            <input type="text" class="lg" name="url">
                            <p>标题可以写30个字</p>
                        </td>
                    </tr>
                    <tr>
                        <th>缩略图</th>
                        <td>
                            <input style="width:300px;" type="text" name="log" value="" id="art_thumb">
                            <input type="file" id="file_upload" name="file_upload" value="">
                            <p> <img src="" alt="" id="img1" style="max-width: 350px; max-height:100px;">
                            </p>

                            <script>
                                $(function () {
                                    $("#file_upload").change(function () {
//                                        alert(1111);
                                        uploadImage();
                                    });
                                });

                                function uploadImage() {
//                            判断是否有选择上传文件
                                    var imgPath = $("#file_upload").val();
                                    if (imgPath == "") {
                                        alert("请选择上传图片！");
                                        return;
                                    }
                                    //判断上传文件的后缀名
                                    var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);
                                    if (strExtension != 'jpg' && strExtension != 'gif'
                                        && strExtension != 'png' && strExtension != 'bmp') {
                                        alert("请选择图片文件");
                                        return;
                                    }
//                            var myform = document.getElementById('art_from');
                                    var formData = new FormData($('#art_form')[0]);
                                    formData.append('_token', '{{csrf_token()}}');
                                                                {{--console.log(formData);--}}
                                    $.ajax({
                                        type: "POST",
                                        url: "/admin/upload",
                                        data: formData,
                                        async: true,
                                        cache: false,
                                        contentType: false,
                                        processData: false,
                                        success: function(data) {
//                                    console.log(data);
//                                    alert("上传成功");
//                                            本服务器的图片
                                            // $('#img1').attr('src','/'+data);
//                                            七牛云图片
                                            $('#img1').attr('src','http://oyrsiqppw.bkt.clouddn.com/'+data);
//                                             OSS图片
                                            //$('#img1').attr('src','http://lamp191.oss-cn-beijing.aliyuncs.com/'+data+'?Expires=1509530934&OSSAccessKeyId=TMP.AQEW9bWoNPqM8jObbs_bvRRE34IP9NWb6Cf2MijQjDXVEVHOBiKkRQkuaWqYADAtAhR64aQMh8eb8Mffon1chldLKI8MWAIVAKBO4SaH5FuvXxugYYJCurNwEVck&Signature=snUfKcB4xAtXRnWHilWMk2QFutg%3D');
                                            $('#art_thumb').val(data);

                                        },
                                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                                            alert("上传失败，请检查网络后重试");
                                        }
                                    });
                                }
                            </script>
                        </td>
                    </tr>
                        <th></th>
                        <td>
                            <input type="submit" value="提交">
                            <input type="button" class="back" onclick="history.go(-1)" value="返回">
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>

@endsection